﻿
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>shikee</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
</head>
<body>


 <div class="main">
    <div class="top">
        <i class="icon iconfont">试客联盟</i>icon

    </div>
     <ul class="icon1" >

         <li>
             <i class="icon iconfont">试</i>
             <div class="name">用户信息</div>
             <div class="code">试</div>
         </li>
         <li>
             <i class="icon iconfont">客</i>
             <div class="name">用户信息</div>
             <div class="code">客</div>
         </li>
         <li>
             <i class="icon iconfont">联</i>
             <div class="name">用户信息</div>
             <div class="code">联</div>
         </li>
         <li>
             <i class="icon iconfont">盟</i>
             <div class="name">用户信息</div>
             <div class="code">盟</div>
         </li>
         <li>
             <i class="icon iconfont">&#x3511;</i>
             <div class="name">服务中心</div>
             <div class="code">&amp;#x3511;</div>
         </li>
         <li>
             <i class="icon iconfont">&#x0102;</i>
             <div class="name">电话</div>
             <div class="code">&amp;#x0102;</div>
         </li>
         <li>
             <i class="icon iconfont">&#x3435;</i>
             <div class="name">基本信息</div>
             <div class="code">&amp;#x3435</div>
         </li>
         <li>
             <i class="icon iconfont">&#x7801;</i>
             <div class="name">上次登陆时间</div>
             <div class="code">&amp;#x7801;</div>
         </li>
         <li>
             <i class="icon iconfont">&#xe616;</i>
             <div class="name">时间</div>
             <div class="code">&amp;#xe616;</div>
         </li>
         <li>
             <i class="icon iconfont">&#xe619;</i>
             <div class="name">试用管理</div>
             <div class="code">&amp;#xe619;</div>
         </li>
         <li>
             <i class="icon iconfont">&#xe642;</i>
             <div class="name">通过试用</div>
             <div class="code">&amp;#xe642;</div>
         </li>
         <li>
             <i class="icon iconfont">&#xe651;</i>
             <div class="name">店铺</div>
             <div class="code">&amp;#xe651;</div>
         </li>
         <li>
             <i class="icon iconfont">&#xe6C1;</i>
             <div class="name">用户信息</div>
             <div class="code">&amp;#xe6C1;</div>
         </li>

         <li>
             <i class="icon iconfont">&#xe6Ca;</i>
             <div class="name">圆圈</div>
             <div class="code">&amp;#xe6Ca;</div>
         </li>
         <li>
             <i class="icon iconfont">&#x0055;</i>
             <div class="name">用户登陆</div>
             <div class="code">&amp;#x0055;</div>
         </li>
         <li>
             <i class="icon iconfont">&#x0056;</i>
             <div class="name">登陆密码</div>
             <div class="code">&amp;#x0056;</div>
         </li>
         <li>
             <i class="icon iconfont">&#x0058;</i>
             <div class="name">商品搜索</div>
             <div class="code">&amp;#x0058;</div>
         </li>
         <li>
             <i class="icon iconfont">&#x0059;</i>
             <div class="name">潮流女装</div>
             <div class="code">&amp;#x0059;</div>
         </li>
         <li>
             <i class="icon iconfont">&#x0060;</i>
             <div class="name">精品男装</div>
             <div class="code">&amp;#x0060;</div>
         </li>
         <li>
             <i class="icon iconfont">&#x0061;</i>
             <div class="name">家居日用</div>
             <div class="code">&amp;#x0061;</div>
         </li>
         <li>
             <i class="icon iconfont">&#x0062;</i>
             <div class="name">鞋子箱包</div>
             <div class="code">&amp;#x0062;</div>
         </li>
         <li>
             <i class="icon iconfont">&#x0063;</i>
             <div class="name">综合试用</div>
             <div class="code">&amp;#x0063;</div>
         </li>
         <li>
             <i class="icon iconfont">&#x0065;</i>
             <div class="name">时尚配饰</div>
             <div class="code">&amp;#x0065;</div>
         </li>
         <li>
             <i class="icon iconfont">&#x0066;</i>
             <div class="name">美食特产</div>
             <div class="code">&amp;#x0066;</div>
         </li>
         <li>
             <i class="icon iconfont">&#x0067;</i>
             <div class="name">用美容护肤</div>
             <div class="code">&amp;#x0067;</div>
         </li>
         <li>
             <i class="icon iconfont">&#x0068;</i>
             <div class="name">数码家电</div>
             <div class="code">&amp;#x0068;</div>
         </li>
         <li>
             <i class="icon iconfont">&#x0069;</i>
             <div class="name">页面图标</div>
             <div class="code">&amp;#x0069;</div>
         </li>
         <li>
             <i class="icon iconfont">&#x0070;</i>
             <div class="name">商家报名</div>
             <div class="code">&amp;#x0070;</div>
         </li>
         <li>
             <i class="icon iconfont">&#x0071;</i>
             <div class="name">登录图标</div>
             <div class="code">&amp;#x0071;</div>
         </li>

         <li>
             <i class="icon iconfont">&#x0072;</i>
             <div class="name">注册图标</div>
             <div class="code">&amp;#x0072;</div>
         </li>
         <li>
             <i class="icon iconfont">&#x0073;</i>
             <div class="name">注册流程</div>
             <div class="code">&amp;#x0073;</div>
         </li>
         <li>
             <i class="icon iconfont">&#x0074;</i>
             <div class="name">帮助中心</div>
             <div class="code">&amp;#x0074;</div>
         </li>
         <li>
             <i class="icon iconfont">&#x0075;</i>
             <div class="name">常见问题</div>
             <div class="code">&amp;#x0075;</div>
         </li>
         <li>
             <i class="icon iconfont">&#x0076;</i>
             <div class="name">常见问题</div>
             <div class="code">&amp;#x0076;</div>
         </li>
         <li>
             <i class="icon iconfont">&#x0077;</i>
             <div class="name">服务中心</div>
             <div class="code">&amp;#x0077;</div>
         </li>
         <li>
             <i class="icon iconfont">&#x0079;</i>
             <div class="name">侧边导航图标</div>
             <div class="code">&amp;#x0079;</div>
         </li>
         <li>
             <i class="icon iconfont">&#x0100;</i>
             <div class="name">侧边导航图标</div>
             <div class="code">&amp;#x0100;</div>
         </li>
         <li>
             <i class="icon iconfont">&#xe652;</i>
             <div class="name">邮件</div>
             <div class="code">&amp;#xe652;</div>
         </li>
         <li>
             <i class="icon iconfont">&#x0078;</i>
             <div class="name">电话</div>
             <div class="code">&amp;#x0078;</div>
         </li>
         <li>
             <i class="icon iconfont">&#x0054;</i>
             <div class="name">关于我们</div>
             <div class="code">&amp;#x0054;</div>
         </li>
         <li>
             <i class="icon iconfont">&#x0053;</i>
             <div class="name">分类图标</div>
             <div class="code">&amp;#x0053;</div>
         </li>
         <li>
             <i class="icon iconfont">&#x0035;</i>
             <div class="name">盟主提醒</div>
             <div class="code">&amp;#x0035;</div>
         </li>
	 <li>
             <i class="icon iconfont">&#xe653;</i>
             <div class="name">在线课堂</div>
             <div class="code">&amp;#x0090;</div>
         </li>
         <li>
             <i class="icon iconfont">&#xe654;</i>
             <div class="name">注册密码</div>
             <div class="code">&amp;#xe654;</div>
         </li>
	 <li>
             <i class="icon iconfont">&#xe656;</i>
             <div class="name">验证码</div>
             <div class="code">&amp;#xe656;</div>
         </li>
         <li>
             <i class="icon iconfont">&#xe657;</i>
             <div class="name">试客注册</div>
             <div class="code">&amp;#xe657;</div>
         </li>
         <li>
             <i class="icon iconfont">&#xe658;</i>
             <div class="name">商家注册</div>
             <div class="code">&amp;#xe658;</div>
         </li>
         <li>
             <i class="icon iconfont">&#xe659;</i>
             <div class="name">注册信息</div>
             <div class="code">&amp;#xe659;</div>
         </li>
         <li>
             <i class="icon iconfont">&#xe660;</i>
             <div class="name">账户信息</div>
             <div class="code">&amp;#xe660;</div>
         </li>
         <li>
             <i class="icon iconfont">&#xe661;</i>
             <div class="name">注册成功</div>
             <div class="code">&amp;#xe661;</div>
         </li>
         <li>
             <i class="icon iconfont">&#xe662;</i>
             <div class="name">蓝色提示语</div>
             <div class="code">&amp;#xe662;</div>
         </li>
         <li>
             <i class="icon iconfont">&#xe663;</i>
             <div class="name">错误提示</div>
             <div class="code">&amp;#xe663;</div>
         </li>
         <li>
             <i class="icon iconfont">&#xe664;</i>
             <div class="name">正确提示</div>
             <div class="code">&amp;#xe664;</div>
         </li>
         <li>
             <i class="icon iconfont">&#xe665;</i>
             <div class="name">手机图标</div>
             <div class="code">&amp;#xe665;</div>
         </li>
     </ul>
 </div>
<div class="help">
    第一步：使用font-face声明字体
    <pre>@font-face {font-family: 'iconfont';
    src: url('iconfont.eot'); /* IE9*/
    src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('iconfont.woff') format('woff'), /* chrome、firefox */
    url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('iconfont.svg#uxiconfont') format('svg'); /* iOS 4.1- */
    }
    </pre>
    第二步：定义使用iconfont的样式
    <pre>.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}
    </pre>
    第三步：挑选相应图标并获取字体编码，应用于页面
    <pre>
    &lt;i class="iconfont"&gt;&amp;#x33&lt;/i&gt;
    </pre>
</div>
 
    
  

  

</body>
</html>
